<template>
  <div class="page">
    <el-card>
      <h3>WIFI无线概况</h3>
      <el-card>
        <el-row class="l-f">
          <el-col :span="12">
            <el-row class="l-f">
              <el-col :span="4">
                <span class="wuxian-icon iconfont icon-wuxiandianbo"></span>
              </el-col>
              <el-col :span="6">
                <span class="info-item">BLNET(820.11bgn)</span>
              </el-col>
              <el-col :span="6">
                <span class="info-item">信道：6(2.437 GHz)</span>
              </el-col>
              <el-col :span="6">
                <span class="info-item">传输速率：? Mbit/s</span>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-input placeholder="请输入搜索内容" v-model="keyword" clearable>
                </el-input>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" icon="el-icon-plus" @click="onAdd">添加</el-button>
                <el-button type="primary" icon="el-icon-plus">中继桥</el-button>
              </el-col>
            </el-row>

          </el-col>
        </el-row>
      </el-card>
      <el-table class="l-mg-top20" border :data="connectData" style="width: 100%">
        <el-table-column prop="date" label="" width="100">
          <template scope="scope">
            <div class="l-f l-column l-row-c">
              <img v-if="scope.row" class="xinhao-icon" src="@/assets/images/xinhao-3.png" alt="">
              <span>40%</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="SSID" min-width="100">
        </el-table-column>
        <el-table-column prop="name" label="模式" min-width="150">
        </el-table-column>
        <el-table-column prop="address" label="BSSID" min-width="150">
        </el-table-column>
        <el-table-column prop="address" label="加密方式" min-width="100">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="onDisabled(scope.row)" type="text" size="small">禁用</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="l-mg-top10">
      <h3>已连接站点</h3>
      <el-table border :data="connectData" style="width: 100%">
        <el-table-column prop="date" label="" width="100">
          <template scope="scope">
            <div>
              <img v-if="scope.row" class="xinhao-icon" src="@/assets/images/xinhao-3.png" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="SSID" min-width="100">
        </el-table-column>
        <el-table-column prop="name" label="MAC-地址" min-width="150">
        </el-table-column>
        <el-table-column prop="address" label="IPv4-地址" min-width="150">
        </el-table-column>
        <el-table-column prop="address" label="信号" min-width="100">
        </el-table-column>
        <el-table-column prop="address" label="噪声" min-width="100">
        </el-table-column>
        <el-table-column prop="address" label="接收速率" min-width="150">
        </el-table-column>
        <el-table-column prop="address" label="发送速率" min-width="150">
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加/编辑网络" :visible.sync="dialogVisible" width="1000px" top="6vh">
      <el-form :model="editForm" ref="editForm" label-width="100px">
        <el-card class="info">
          <h3>状态</h3>
          <el-row>
            <el-col :span="5">
              <div class="info_xinhao l-f l-column l-row-c">
                <img class="info_xinhao_icon" src="@/assets/images/xinhao-3.png" alt="">
                <span class="info_xinhao_value">0%</span>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="模式：">
                <span class="status-value">Client</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="SSID: ">
                <span class="status-value">hy5f3</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="BSSID: ">
                <span class="status-value">AC:AB:2E:09:01:1C</span>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="加密方式: ">
                <span class="status-value">-</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="信道:">
                <span class="status-value">6 (2.437 GHz) </span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="传输功率:">
                <span class="status-value">0 dBm</span>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="信号:">
                <span class="status-value">0 dBm</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="噪声:">
                <span class="status-value">0 dBm</span>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="传输速率:">
                <span class="status-value">0.0 Mbit/s </span>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="国家:">
                <span class="status-value"> 00</span>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="信道:">
                <span class="status-value"> Locked to channel 6 used by: 客户端Client "hy5f3"</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <!-- <el-form-item label="中心名字" prop="value1">
          <el-input v-model="editForm.value1"></el-input>
        </el-form-item>
        <el-form-item label="中心类型" prop="value2">
          <el-select v-model="editForm.value2" placeholder="请选择中心类型">
            <el-option label="IOT接入云平台" value="shanghai"></el-option>
            <el-option label="IOT数据云平台" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中心地址" prop="value3">
          <IPAddress v-model="editForm.value3" />
        </el-form-item>
        <el-form-item label="中心端口" prop="value4">
          <el-input v-model="editForm.value4"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="value5">
          <el-switch v-model="editForm.value5"></el-switch>
        </el-form-item> -->
        <el-card class="l-mg-top20">
          <h3>设备配置</h3>
          <el-tabs type="border-card">
            <el-tab-pane label="基本设置">
              <el-form-item label="无线网络开关" prop="value1">
                <el-switch v-model="editForm.value1">
                </el-switch>
              </el-form-item>
              <el-form-item label="无线电功率">
                <el-select v-model="editForm.value2" placeholder="请选择无线电功率">
                  <el-option label="0 dBm(1 mW)" value="1"></el-option>
                  <el-option label="4 dBm(2 mW)" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="WIFI看护">
                <el-select v-model="editForm.value3" placeholder="请选择WIFI看护">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="高级设置">
              <el-form-item label="国家代码">
                <el-select v-model="editForm.value4" placeholder="请选择国家代码">
                  <el-option label="00 - World" value="1"></el-option>
                  <el-option label="AD - Andorra" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="距离优化">
                <el-input-number v-model="editForm.value5" :min="0" :max="999999"></el-input-number>
              </el-form-item>
              <el-form-item label="分片阈值">
                <el-input-number v-model="editForm.value6" :min="0" :max="999999"></el-input-number>
              </el-form-item>
              <el-form-item label="RTS/CTS阈值">
                <el-input-number v-model="editForm.value7" :min="0" :max="999999"></el-input-number>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <el-card class="l-mg-top20">
          <h3>接口配置</h3>
          <el-tabs type="border-card">
            <el-tab-pane label="基本设置">
              <el-form-item label="ESSID">
                <el-input type="text" v-model="editForm.value8" placeholder="请输入ESSID"></el-input>
              </el-form-item>
              <el-form-item label="模式">
                <el-select v-model="editForm.value9" placeholder="请选择模式">
                  <el-option label="接入点AP" value="1"></el-option>
                  <el-option label="客户端Client" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="MAC地址">
                <el-select v-model="editForm.value10" placeholder="请选择模式" filterable allow-create>
                  <el-option label="20:21:33:24:f9:4d" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否隐藏ESSID" label-width="200">
                <el-switch v-model="editForm.value11">
                </el-switch>
              </el-form-item>
              <el-form-item label="WMM多媒体是否加速" label-width="200">
                <el-switch v-model="editForm.value12">
                </el-switch>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="无线安全">
              <el-form-item label="加密方式">
                <el-select v-model="editForm.value13" placeholder="请选择加密方式">
                  <el-option label="No Encryption" value="1"></el-option>
                  <el-option label="WEP 开放认证" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="MAC-过滤">
              <el-form-item label="MAC-地址过滤">
                <el-select v-model="editForm.value14" placeholder="请选择MAC-地址过滤" label-width="200">
                  <el-option label="禁用" value="1"></el-option>
                  <el-option label="仅运行列表内" value="2"></el-option>
                  <el-option label="仅运行列表外" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="高级设置">
              <el-form-item label="连接数限制">
                <el-input-number v-model="editForm.value15" :min="0" :max="999999"></el-input-number>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-form>
      <div class="desc">
        <i class="el-icon-warning"></i>
        <span
          class="desc_label">设备配置区域可配置无线的硬件参数，比如信道、发射功率或发射天线(如果此无线模块硬件支持多SSID，则全部SSID共用此设备配置)。接口配置区域则可配置此网络的工作模式和加密等。</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      connectData: [],
      keyword: '',
      dialogVisible: false,
      editForm: {
        value1: 1,
        value2: '',
        value3: '',
        value4: '',
        value5: '',
        value6: '',
        value7: '',
        value8: '',
        value9: '',
        value10: '',
        value11: false,
        value12: true,
        value13: '',
        value14: '',
        value15: '',
      }
    }
  },
  methods: {
    onDisabled() {

    },
    onAdd() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.wuxian-icon {
  font-size: 60px;
  color: aqua;
}

.info-item {
  font-size: 16px;
  font-weight: 700;
  color: #409eff;
}

.xinhao-icon {
  width: 30px;
}

.desc {
  margin-top: 20px;

  &_label {
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    margin-left: 6px;
  }
}

.info {
  &_xinhao {
    &_icon {
      width: 40px;
    }

    &_value {
      font-size: 14px;
      font-weight: 700;
    }
  }

  ::v-deep .el-form-item__label {
    color: #409eff;
  }
}

.status-value {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}
</style>